<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>books</title>
    <style>
        table{
            width: 1000px;
        }
     #th{
         background:#000000 ;
         color: #F0F8FF;
     }
     #td{
        background: #363636;
        color: #F0F8FF;
        text-align: center;
     }
     button{
         background-color: 	#363636;
         border: none;
         color:#436EEE;
     }
     .col-sm-4{
         border: solid 1px black;
         width: 500px;
         height: 500px;
         color: aliceblue;
         position: absolute;
         top: 150px;
         left: 1100px; 
     }
     .card-header{
         background-color:#2F4F4F;
         height: 50px;

     }
     .input-group-text{
        background-color: #D3D3D3;
        color: black;
     }
     .input-group-text{
        border-top-left-radius: 10%;
        border-bottom-left-radius:10%;
     }
     .input-group{
         margin-left: 50px;
         margin: 50px;
     }
     .btn{
           margin-top: 10px;
           border-radius: 5px;
           background-color: #363636;
           color: aliceblue;
     }
     .btn-liink{
         color:#1E90FF ;
     }
    </style>

    <script>
    //     function myrefresh() 
    //      { 
    //     window.location.reload(); 
    //      } 
    //    setTimeout('myrefresh()',20000); 

    </script>

</head>
<body>
    <table border="1" cellspacing="0">
    <thead>
     <tr id="th">
         <th>id</th>
         <th>书名</th>
         <th>作者</th>
         <th>出版社</th>
         <th scope="col">操作</th>
     </tr>
    </thead>
     <tbody>
     <tr id="td">
         <td>xxx</td>
         <td>xxx</td>
         <td>xxx</td>
         <td>xxx</td>
         <td><button type="button" class="btn btn-liink btn-sm">删除</button></td>
     </tr>
    </tbody>
    </table>
    
    <div class="col-sm-4" style="margin-top: 20px">
        <div class="card text-white bg-secondary sticky-top" >
             <div class="card-header">添加新图书</div>
             <form action="" class="card-body bg-light" id="addFrom">
                 <!-- 书名 -->
                 <div class="input-group mb-3">
                     <div class="input-group-prepend">
                         <span class="input-group-text">书名</span>
                     </div>
                     <input type="text" class="from-control" placeholder="请输入图书名称" name="bookname">
                 </div>
                 <!-- 作者 -->
                 <div class="input-group mb-3">
                     <div class="input-group-prepend">
                         <span class="input-group-text">作者</span>
                     </div>
                     <input type="text" class="form-control" placeholder="请输入作者名字" name="author">
                 </div>
                 <!-- 出版社 -->
                 <div class="input-group mb-3">
                     <div class="input-group-prepend">
                        <span class="input-group-text">出版社</span>
                        <input type="text" class="form-control" placeholder="请输入出版社名称" name="publisher">
                     </div>
                     <button class="btn btn-dark add" type="submit">添加</button>
                 </div>
             </form>
        </div>
    </div>
    <!-- <ul>
        <li></li>
    </ul> -->

    <script src="./js/axios.min.js"></script>

    <script>
        //查询页面
        //发送ajax
      axios.get('http://ajax-base-api-t.itheima.net/api/getbooks').then(res=>{
        //   console.log(res)
        // debugger
        
        //渲染图书列表
        //固定语法: dom元素.innerHTML = arr.map(item=>'').join('')
        document.querySelector('tbody').innerHTML =res.data.data.map(item=>`
        <tr id="td">
         <td>${item.id}</td>
         <td>${item.bookname}</td>
         <td>${item.author}</td>
         <td>${item.publisher}</td>
         <td><button type="button" class="btn btn-liink btn-sm">删除</button></td>
     </tr>
        `).join('')
      })
      
      //新增点击
      document.querySelector('.add').addEventListener('click',function(e){
          //阻止表单默认跳转
          e.preventDefault()
          //收集表单参数
          const bookname = document.querySelector('[name="bookname"]').value
          const author = document.querySelector('[name="author"]').value
          const publisher = document.querySelector('[name="publisher"]').value
          
          //效验数据:非空效验
          if( bookname === '' || author === '' || publisher === ''){
             return alert('输入框不能为空')
          }
          //发送数据:ajax请求
          axios.post('http://ajax-base-api-t.itheima.net/api/addbook',{bookname,author,publisher}).then(res=>{
              console.log(res)  
        
          //处理数据:刷新列表
              if(res.data.status === 201){
              alert('新增成功')
              axios.get('http://ajax-base-api-t.itheima.net/api/getbooks').then(res=>{
        //   console.log(res)
        // debugger

        document.querySelector('tbody').innerHTML =res.data.data.map(item=>`
        <tr id="td">
         <td>${item.id}</td>
         <td>${item.bookname}</td>
         <td>${item.author}</td>
         <td>${item.publisher}</td>
         <td><button type="button" class="btn btn-liink btn-sm">删除</button></td>
     </tr>
        `).join('')
      })
          }

          })

      })
    </script>
</body>
</html>